<template>
	<view>
		<view class="title">
			<h1>期待您给我们这一次服务打分！</h1>
		</view>
		<!-- 打分区域 -->
		<view class="score">
			<view class="scoreList">
				<text>响应速度：</text>
				<u-rate :count="count" v-model="value" gutter="20" @change="changeData"></u-rate>
			</view>
			<view class="scoreList">
				<text>服务态度：</text>
				<u-rate :count="count" v-model="value" gutter="20" @change="changeData"></u-rate>
			</view>
			<view class="scoreList">
				<text>技术能力：</text>
				<u-rate :count="count" v-model="value" gutter="20" @change="changeData"></u-rate>
			</view>
		</view>
		<!-- 反馈区域 -->
		<view class="textBox">
			<textarea value="" placeholder="期待你的建议或反馈(非必填)" />
		</view>
		<!-- 添加图片区域 -->
		<view class="cateList">
			添加图片(非必选)：
		</view>
		<view class="imgContainer">
			<view class="imgButton" @click="chooseImg">
				<text class="iconfont icon-paizhaoshangchuan"></text>
			</view>
			<view class='imageInfo' v-for="(value,index) in imgItem" :key="index">
				<image :src="value" :data-index="index" mode="aspectFill" @click="imgPreview(index,imgItem)">
					<!-- <icon type='cancel' ></icon> -->
					<u-icon name="close-circle" class="delete-btn" @click="deletePic(index)" :data-pic_index='index'>
					</u-icon>
				</image>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="evaluateBtn">
			<u-button>提交评价</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value1: 0,
				value2: 0,
				value2: 0,
				imgItem:[]
			}
		},
		methods: {
			changeData(e) {
				console.log(e);
			},
			//选择图片
			chooseImg() {
				let that = this;
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.imgItem = res.tempFilePaths;
						console.log(that.imgItem);
					}
				});
			},
			//预览图片
			imgPreview(index, imgItem) {
				uni.previewImage({
					current: index,
					urls: imgItem
				})
			},
			//删除图片
			deletePic(index) {
				var pic_index = index;
				var upload_pic = [];
				console.log('删除')
				for (let i in this.imgItem) {
					// 将没有被删除的图片放入新数组
					if (i != pic_index) {
						upload_pic.push(this.imgItem[i]);
					}
				}
				this.imgItem = upload_pic;
				console.log(this.imgItem);
			},
			//上传图片
			async upLoadImg(i) {
				let that = this;
				let {
					data: res
				} = await uni.uploadFile({
					url: 'https://zioncloud.top/repair/feedback/fileUpload', //仅为示例，非真实的接口地址
					filePath: that.imgItem[i],
					name: 'file',
					formData: {
						openId: that.openId,
						path: that.imgItem[i],
						feedbackId: that.feedbackId,
					},
					success: (uploadFileRes) => {
						console.log('上传图片成功？');
						console.log(uploadFileRes.data);
					}
				});
				console.log(res);
			}
		}
	}
</script>
<style>
	.title {
		text-align: center;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.score {
		margin-left: 45rpx;
	}

	.scoreList {
		margin-top: 20rpx;
	}

	.textBox {
		border: #eee solid 1rpx;
		padding: 15rpx;
		width: 90%;
		height: 150rpx;
		margin-left: 45rpx;
		margin-top: 30rpx;
	}
	
	.textBox textarea{
		height:100%;
		width: 100%;
	}
	/* 图片预览 */
	.cateList {
		margin-left: 35rpx;
		margin-top: 15rpx;
	}
	.imgContainer {
		width: 90%;
		padding: 10rpx;
		margin: 20rpx 30rpx 0 35rpx;
		border: 1px solid #ccc;
		border-radius: 25rpx;
		overflow: auto;
		background-color: #fff;
	}
	
	.imgContainer:hover {
		border: 1px solid gray;
	}
	
	.imgButton {
		float: left;
		width: 18%;
		height: 120rpx;
		margin: 2rpx 6rpx;
	}
	
	.imgButton text {
		/* padding: 20rpx; */
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 100rpx;
		text-align: center;
	}
	
	.imageInfo {
		position: relative;
		border: 1rpx solid #ccc;
		border-radius: 2rpx;
		width: 18%;
		height: 120rpx;
		margin: 2rpx 6rpx;
		float: left;
		border-radius: 5rpx;
	}
	
	.imageInfo image {
		width: 100%;
		height: 100%;
	}
	
	.delete-btn {
		position: absolute;
		font-size: 40rpx;
		top: 0;
		right: 0;
		color: red;
	}
	/* 提交按钮 */
	.evaluateBtn{
		position:absolute;
		width:50%;
		bottom: 15%;
		left: 50%;
		transform: translate(-50%,0);
	}
</style>
